<template>
	<view id="app">
		<!-- 订单列表 -->
		<scroll-view scroll-X class="navBar" enable-flex>
			<view class="nav" :class="index == current ? 'active' : ''" v-for="(item,index) in topNav" :key="index" @click="change(index)">
				<view class="item">
					<view class="txt">{{item.name}}</view>
					<view class="line"></view>
				</view>
			</view>
		</scroll-view>

		<!-- 列表 -->
		<view class="order mlr30 mt30">

			<!-- 订单列表 -->
			<view class="list area mb30 pt10 plr25" @click="toDetail(item)" v-for="(item,index) in wrap.list" :key="index">
				<!-- 上 -->
				<view class="top rows ptb15 bdb1se f28">
					<!-- 订单编号 -->
					<view class="code c666">订单编号：{{item.number}}</view>
					<!-- 订单状态 -->
					<view class="state c333">{{item.status_text}}</view>
				</view>
				<!-- 内容 -->
				<view class="mid df ais ptb20 bdb1se">
					<!-- 商品图片 -->
					<view class="proImg img180">
						<image :src="item.goodsData.images[0]" mode="aspectFill" lazy-load></image>
					</view>
					<!-- 商品信息 -->
					<view class="proInfo df dfc dfsb oh ml20 f1">
						<!-- 商品名称 -->
						<view class="title t2hd f28 c333 b">{{item.goodsData.name}}</view>
						<!-- 其他 -->
						<view class="other c333 f28 tar">
							<text>共{{item.num}}件商品 实付:</text>
							<text class="cff9646">￥{{item.total}}</text>
						</view>
					</view>
				</view>


				<!-- 功能区 -->
				<view class="botFn df dfr ptb20" v-if="item.status == 2">
					<view class="mr30">
						<view class="btn cancel w150">查看详情</view>
					</view>
					<view>
						<view class="btn prmary w150" @click.stop="target = index;send()">发货</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else-if="item.status == 5 && item.shop_refund_status == 2">
					<view class="mr30">
						<view class="btn cancel w150" @click.stop="target = index;confirm()">同意退款</view>
					</view>
					<view class="mr30">
						<view class="btn cancel w150" @click.stop="target = index;reject()">拒绝退款</view>
					</view>
					<view>
						<view class="btn prmary w200">查看详情</view>
					</view>
				</view>
				<view class="botFn df dfr ptb20" v-else>
					<view>
						<view class="btn prmary w150">查看详情</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				topNav: [{
						name: '全部',
					},
					{
						status: '1',
						name: '待付款',
					},
					{
						status: '2,3',
						name: '待发货',
					},
					{
						status: '4',
						name: '已完成',
					},
					{
						status: '5,6',
						name: '退款售后',
					},
				],
				// 下标
				current: 0,
				// 内容
				wrap: {
					// 页码
					page: 1,
					// 列表
					list: [],
					// 是否加载
					ifLoad: false,
				},
				// 操作下标
				target: '',
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 判断类型
			if (e.type) {
				// 赋值下标
				that.current = Number(e.type) - 1;
			}

			// 用户selluser
			e.selluser ? that.selluser = e.selluser : '';
		},

		// 页面出现
		onShow() {
			// 重置页码
			that.wrap.page == 1;

			// 订单列表
			that.order_list();

		},

		// 页面触底
		onReachBottom() {
			// 判断是否可以加载
			if (that.wrap.ifLoad) {
				// 增加页码
				that.wrap.page++;

				// 订单列表
				that.order_list();
			}
		},

		// 下拉刷新
		onPullDownRefresh() {
			// 增加页码
			that.wrap.page = 1;

			// 订单列表
			that.order_list();
		},

		// 方法集
		methods: {
			// 拒绝退款
			reject() {
				// 跳转页面
				uni.navigateTo({
					url: '/pages/my/shop/setorder?type=2&id=' + that.wrap.list[that.target].id,
				})
			},

			// 同意退款
			confirm() {
				// 弹窗提示
				that.alert({
					value: '确认同意退款',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 改变订单状态
							that.util.changeOrder({
								data: {
									// 订单id
									id: that.wrap.list[that.target].id,
									// 订单状态
									status: 6,
									// 商家反馈
									shop_refund_status: 3,
									// 商家处理时间
									refundtime: Date.parse(new Date()) / 1000,
								},
							}, that)
						}
					}
				});
			},

			// 发货
			send() {
				// 判断当前是发货还是自提
				if (that.wrap.list[that.target].goodsData.express == '自提') {
					// 订单数据
					var data = {
						// id
						id: that.wrap.list[that.target].id,
						// 订单数据
						status: 3,
						// 发货时间
						express_time: Date.parse(new Date()) / 1000,
					}

					// 改变订单状态
					that.util.changeOrder({
						data: data,
						success(rs) {
							// 弹窗提示
							that.alert('操作成功');

							// 增加页码
							that.wrap.page = 1;

							// 订单列表
							that.order_list();
						}
					}, that)
				} else {
					// 跳转页面
					uni.navigateTo({
						url: '/pages/my/shop/setorder?type=1&id=' + that.wrap.list[that.target].id,
					})
				}
			},

			// 订单列表
			order_list() {
				// 变量
				var wrap = that.wrap;

				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: {
						table: 'goods_order',
						// 商家id
						sell_user: that.selluser,
						// 订单状态
						status: that.current == 0 ? '' : that.topNav[that.current].status,
						// 页
						page: wrap.page,
						// 条
						count: 10,
					},
					// 加载
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 判断页码
							if (wrap.page == 1) {
								// 清空列表
								that.wrap.list = [];
							}

							// 赋值列表
							wrap.list.push(...rs.data);

							// 判断数据是否可以加载
							if (rs.data[9]) {
								wrap.ifLoad = true;
							} else {
								wrap.ifLoad = false;
							}

							// 赋值内容
							that.wrap = wrap;
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					},
					complete() {
						// 关闭下拉刷新
						uni.stopPullDownRefresh();
					}
				})
			},

			// 切换下标
			change(index) {
				// 判断是否相等
				if (that.current == index) {
					return;
				}

				// 赋值下标
				that.current = index;

				// 订单列表
				that.order_list();
			},

			// 跳转详情
			toDetail(item) {
				// 跳转页面
				uni.navigateTo({
					url: '/pages/my/shop/odetail?id=' + item.id,
				})
			},
		},
	};
</script>
<style lang="less">
	@active: #FFA351;

	// 导航条
	.navBar {
		display: flex;
		height: 100rpx;
		white-space: nowrap;
		background-color: white;

		// 导航块
		.nav {
			display: inline-block;
			flex: 1;
			text-align: center;

			// 内容
			.item {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				padding: 20rpx 30rpx;

				// 文字
				.txt {
					color: #666;
					font-size: 30rpx;
					transition: .3s;
				}

				// 线
				.line {
					width: 0;
					height: 10rpx;
					margin: 15rpx auto 0;
					background-color: @active;
					border-radius: 100rpx;
					transition: .3s;
				}
			}
		}

		// 激活
		.active {

			// 项
			.item {

				// 文字
				.txt {
					color: @active;
				}

				// 线
				.line {
					width: 100%;
				}

			}
		}
	}

	// 订单
	.order {

		// 按钮
		.btn {
			padding-top: 15rpx;
			padding-bottom: 15rpx;
		}
	}
</style>
